<template>
    <div class="layout">
        <!-- Page Header -->
        <header class="masthead" style="background-image: url('/home-bg.jpg')">
            <div class="overlay"></div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-10 mx-auto">
                        <div class="site-heading">
                            <h1>Gridsome Blog</h1>
                            <span class="subheading">A Blog Theme by Start Bootstrap</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="el-row" style="display: flex;">
            <div class="el-col el-col-6" style="width: 200px;padding-right: 10px">
              <ul class="navbar-nav ml-auto" style="display: inline-block;">
                  <li class="nav-item">
                      <g-link class="nav-link" to="/post/5">最新动态</g-link>
                  </li>
                  <li class="nav-item">
                      <g-link class="nav-link" to="/">博客列表</g-link>
                  </li>
                  <li class="nav-item">
                      <g-link class="nav-link" to="/about/">about</g-link>
                  </li>
                  <li class="nav-item">
                      <g-link class="nav-link" to="/contact/">Contact</g-link>
                  </li>
              </ul>
            </div>
            <div class="el-col el-col-18" style="padding-left: 10px; flex: 1;">
              <slot />
            </div>
        </div>

        <hr />

        <!-- Footer -->
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-10 mx-auto">
                        <ul class="list-inline text-center">
                            <li class="list-inline-item">
                                <a href="#">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <p class="copyright text-muted">Copyright &copy; Your Website 2020</p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style>
.active--exact{
  color: #007bff;
  background: lightgrey;
}
</style>
